import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { HotSingerWrapper } from './style'
import AreaHeaderV2 from '@/components/area-header-v2/AreaHeaderV2'
import { shallowEqualApp, useAppDispatch, useAppSelector } from '@/store'
import { fetchDiscoverHotDJ } from '@/store/modules/discover'
import { forMatImageUrl } from '@/utlis/format'

interface IProps {
  children?: ReactNode
}

const HotSinger: FC<IProps> = () => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(fetchDiscoverHotDJ())
  }, [])

  const { hotDJ } = useAppSelector((state) => {
    return {
      hotDJ: state.discover.hotDJ
    }
  }, shallowEqualApp)

  return (
    <HotSingerWrapper>
      <AreaHeaderV2 title="热门主播"></AreaHeaderV2>
      <div className="content">
        {hotDJ.map((item) => {
          return (
            <div className="item" key={item.id}>
              <img src={forMatImageUrl(item.picUrl, 40)}/>
              <div className="info">
                <div className="name">{item.name}</div>
                <div className="desc">{item.rcmdtext}</div>
              </div>
            </div>
          )
        })}
      </div>
    </HotSingerWrapper>
  )
}

export default memo(HotSinger)
